<template>
  <div class="realtime-trading">
    <div class="trading-header">
      <h3 class="trading-title">实时交易监控</h3>
      <div class="trading-status">
        <span class="status-indicator active">
          <span class="pulse-dot"></span>
          实时
        </span>
      </div>
    </div>
    
    <div class="trading-content">
      <!-- 主要交易指标 -->
      <div class="main-metrics">
        <div class="metric-item">
          <div class="metric-label">交易总额</div>
          <div class="metric-value">
            <AnimatedCounter :value="tradingData.totalAmount" prefix="¥" :decimals="0" />
          </div>
          <div class="metric-change positive">+{{ tradingData.amountChange }}%</div>
        </div>
        
        <div class="metric-item">
          <div class="metric-label">成功率</div>
          <div class="metric-value">{{ tradingData.successRate }}%</div>
          <div class="metric-change positive">+{{ tradingData.successChange }}%</div>
        </div>
      </div>
      
      <!-- 实时交易流 -->
      <div class="trading-stream">
        <div class="stream-header">
          <span class="stream-title">交易流水</span>
          <span class="stream-count">{{ tradingData.todayCount }}笔</span>
        </div>
        
        <div class="stream-items">
          <div 
            v-for="(transaction, index) in recentTransactions" 
            :key="transaction.id"
            class="transaction-item"
            :class="transaction.status"
            :style="{ animationDelay: index * 50 + 'ms' }"
          >
            <div class="transaction-status">
              <span class="status-dot" :class="transaction.status"></span>
            </div>
            <div class="transaction-info">
              <div class="transaction-amount">¥{{ transaction.amount }}</div>
              <div class="transaction-time">{{ transaction.time }}</div>
            </div>
            <div class="transaction-type">{{ transaction.type }}</div>
          </div>
        </div>
      </div>
      
      <!-- 交易趋势微图表 -->
      <div class="mini-chart">
        <div class="chart-header">
          <span class="chart-title">1小时趋势</span>
        </div>
        <div class="trend-line">
          <svg viewBox="0 0 200 60" class="trend-svg">
            <defs>
              <linearGradient id="trendGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#00f0ff;stop-opacity:0.8" />
                <stop offset="100%" style="stop-color:#00f0ff;stop-opacity:0" />
              </linearGradient>
            </defs>
            <path 
              :d="trendPath" 
              fill="url(#trendGradient)" 
              stroke="#00f0ff" 
              stroke-width="2"
            />
            <path 
              :d="trendLine" 
              fill="none" 
              stroke="#00f0ff" 
              stroke-width="2"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import AnimatedCounter from './AnimatedCounter.vue'

// 交易数据
const tradingData = ref({
  totalAmount: 8650000,
  amountChange: 12.5,
  successRate: 98.7,
  successChange: 0.3,
  todayCount: 3456
})

// 近期交易记录
const recentTransactions = ref([])

// 趋势数据
const trendData = ref([])

let updateTimer = null

// 生成随机交易记录
const generateTransaction = () => {
  const types = ['支付', '退款', '充值', '提现']
  const statuses = ['success', 'pending', 'failed']
  const weights = [85, 10, 5] // 成功率85%，处理中10%，失败5%
  
  const randomStatus = () => {
    const random = Math.random() * 100
    if (random < weights[0]) return statuses[0]
    if (random < weights[0] + weights[1]) return statuses[1]
    return statuses[2]
  }
  
  return {
    id: Date.now() + Math.random(),
    amount: (Math.random() * 5000 + 100).toFixed(2),
    time: new Date().toLocaleTimeString(),
    type: types[Math.floor(Math.random() * types.length)],
    status: randomStatus()
  }
}

// 生成趋势数据点
const generateTrendData = () => {
  const points = []
  for (let i = 0; i < 20; i++) {
    points.push({
      x: i * 10,
      y: 30 + Math.sin(i * 0.5) * 15 + (Math.random() - 0.5) * 10
    })
  }
  return points
}

// 计算SVG路径
const trendPath = computed(() => {
  if (trendData.value.length === 0) return ''
  
  let path = `M 0 60`
  trendData.value.forEach(point => {
    path += ` L ${point.x} ${point.y}`
  })
  path += ` L 190 60 Z`
  return path
})

const trendLine = computed(() => {
  if (trendData.value.length === 0) return ''
  
  let path = `M ${trendData.value[0].x} ${trendData.value[0].y}`
  trendData.value.slice(1).forEach(point => {
    path += ` L ${point.x} ${point.y}`
  })
  return path
})

// 更新数据
const updateData = () => {
  // 更新交易总额
  tradingData.value.totalAmount += Math.floor(Math.random() * 50000 + 10000)
  
  // 添加新交易记录
  const newTransaction = generateTransaction()
  recentTransactions.value.unshift(newTransaction)
  
  // 保持最多8条记录
  if (recentTransactions.value.length > 8) {
    recentTransactions.value.pop()
  }
  
  // 更新趋势数据
  trendData.value = generateTrendData()
}

onMounted(() => {
  // 初始化数据
  for (let i = 0; i < 6; i++) {
    recentTransactions.value.push(generateTransaction())
  }
  trendData.value = generateTrendData()
  
  // 定时更新
  updateTimer = setInterval(updateData, 2000)
})

onUnmounted(() => {
  if (updateTimer) {
    clearInterval(updateTimer)
  }
})
</script>

<style scoped>
.realtime-trading {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(15, 52, 96, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 20px;
  overflow: hidden;
}

.trading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.trading-title {
  color: #00f0ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #00ff9d;
  font-size: 11px;
  font-weight: 500;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background: #00ff9d;
  border-radius: 50%;
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(0, 255, 157, 0); }
}

.trading-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-metrics {
  display: flex;
  gap: 12px;
}

.metric-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: rgba(0, 240, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.1);
}

.metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  margin-bottom: 4px;
}

.metric-value {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.metric-change {
  font-size: 10px;
  font-weight: 500;
}

.metric-change.positive {
  color: #00ff9d;
}

.trading-stream {
  flex: 1;
  min-height: 0;
}

.stream-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.stream-title {
  color: #00f0ff;
  font-size: 12px;
  font-weight: 600;
}

.stream-count {
  color: #00ff9d;
  font-size: 11px;
  font-weight: 500;
}

.stream-items {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.stream-items::-webkit-scrollbar {
  width: 2px;
}

.stream-items::-webkit-scrollbar-track {
  background: rgba(0, 240, 255, 0.1);
}

.stream-items::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 1px;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: rgba(0, 240, 255, 0.05);
  border-radius: 6px;
  border-left: 3px solid transparent;
  animation: slideInFromRight 0.5s ease-out;
  transition: all 0.3s ease;
}

.transaction-item:hover {
  background: rgba(0, 240, 255, 0.1);
  transform: translateX(-2px);
}

.transaction-item.success {
  border-left-color: #00ff9d;
}

.transaction-item.pending {
  border-left-color: #ffa502;
}

.transaction-item.failed {
  border-left-color: #ff4757;
}

.transaction-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-dot.success {
  background: #00ff9d;
}

.status-dot.pending {
  background: #ffa502;
}

.status-dot.failed {
  background: #ff4757;
}

.transaction-info {
  flex: 1;
  min-width: 0;
}

.transaction-amount {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.transaction-time {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.transaction-type {
  color: rgba(0, 240, 255, 0.8);
  font-size: 9px;
  font-weight: 500;
}

.mini-chart {
  margin-top: auto;
}

.chart-header {
  margin-bottom: 8px;
}

.chart-title {
  color: #00f0ff;
  font-size: 11px;
  font-weight: 500;
}

.trend-line {
  height: 60px;
}

.trend-svg {
  width: 100%;
  height: 100%;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style> 